<template>
	<!-- 展示外部图标 -->
	<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className"></div>
	<!-- 展示内部图标 -->
	<svg v-else class="svg-icon" :class="className" aria-hidden="true">
		<use :xlink:href="iconName"></use>
	</svg>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { isExternal as external } from '@/utils/vaildate'

	interface IProps {
		icon: string
		className?: string
	}

	const $props = withDefaults(defineProps<IProps>(), {
		icon: '',
		className: '',
	})

	// 判断当前图标是否是外部图标
	const isExternal = computed(() => external($props.icon))

	// 外部图标的样式
	const styleExternalIcon = computed(() => ({
		mask: `url(${$props.icon}) no-repeat 50% 50%`,
		'-webkit-mask': `url(${$props.icon}) no-repeat 50% 50%`,
	}))

	// 项目内部图标
	const iconName = computed(() => `#icon-${$props.icon}`)
</script>

<style lang="scss" scoped>
	.svg-icon {
		width: 1em;
		height: 1em;
		overflow: hidden;
		vertical-align: -0.15em;
		fill: currentcolor;
	}

	.svg-external-icon {
		display: inline-block;
		background-color: currentcolor;
		mask-size: cover !important;
	}
</style>
